<template>
  <div>
    <el-button type="primary" @click="openDialog">导入</el-button>
    <el-button type="primary" @click="exportDialog">导出</el-button>
    <ImportExportDialog ref="importExportDialog" v-model="dialogVisible" :dialogVisible="dialogVisible"
      @close="dialogVisible = false" />

    <ExportCmp ref="exportCmp" v-model="exportVisible" :dialogVisible="exportVisible" @close="exportVisible = false" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ImportExportDialog from './modules/ImportExport.vue';
import ExportCmp from './modules/ExportCmp.vue';

const importExportDialog = ref<InstanceType<typeof ImportExportDialog> | null>(null);
const dialogVisible = ref(false);
const exportVisible = ref(false);

//点击导入按钮，打开导入弹窗，并从父组件传递 导入文件名称、模板下载地址
const openDialog = () => {
  dialogVisible.value = true;
};

//点击导出按钮，打开导出弹窗，并从父组件传递 导出文件名称、要导出数据数组、导出字段数组（即表格的表头)
const exportDialog = () => {
  exportVisible.value = true;
};


</script>



<!-- <template>
  <div>
    <el-button type="primary" @click="openImportDialog">导入</el-button>
    <ImportDialog v-model="importDialogVisible" :dialogVisible="importDialogVisible" :templateName="templateName"
      :templateUrl="templateUrl" :uploadAction="uploadAction" @close="importDialogVisible = false"
      @ok="handleImportOk" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ImportDialog from '@/components/ImportExport/ImportDialog.vue';

const importDialogVisible = ref(false);
const templateName = '上传模板名称1111';
const templateUrl = '/path/to/template.xlsx';
const uploadAction = 'https://jsonplaceholder.typicode.com/posts/';

const openImportDialog = () => {
  importDialogVisible.value = true;
};

const handleImportOk = () => {
  console.log("导入成功");
  importDialogVisible.value = false;
};
</script> -->

<!-- <template>
  <div>
    <el-button type="primary" @click="openExportDialog">导出</el-button>
    <ExportDialog v-model="exportDialogVisible" :dialogVisible="exportDialogVisible" :templateName="templateName"
      :selectedItems="selectedItems" :columns="cities" @close="exportDialogVisible = false" @ok="handleExportOk" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ExportDialog from '@/components/ImportExport/ExportDialog.vue'
const exportDialogVisible = ref(false);
const templateName = '导出模板的名称';
const selectedItems = [
  {
    "id": 281,
    "name": "徐之仁测试",
    "loginAccount": "18875071445",
    "mobilePhoneNumber": "18875071445",
    "belongingRole": "1",
    "belongingRoleName": null,
    "mailbox": null,
    "deptId": 1,
    "department": "广千集团",
    "updateBy": "向小蓉",
    "password": "qg123456",
    "sex": 0,
    "personalPhotos": null,
    "status": 0,
    "role": [
      {
        "id": 1,
        "authType": null,
        "delFlag": null,
        "roleName": null,
        "roleKey": null,
        "dataRange": null,
        "roleStatus": null,
        "remark": null,
        "pagingQuery": null,
        "operationRecord": null,
        "menuList": null,
        "dataScope": null,
        "deptId": null,
        "roleUserAssociationsList": null
      }
    ]
  },
  {
    "id": 280,
    "name": "徐之仁测试",
    "loginAccount": "18875071445",
    "mobilePhoneNumber": "18875071445",
    "belongingRole": "1",
    "belongingRoleName": null,
    "mailbox": null,
    "deptId": 1,
    "department": "广千集团",
    "updateBy": "向小蓉",
    "password": "qg123456",
    "sex": 0,
    "personalPhotos": null,
    "status": 0,
    "role": [
      {
        "id": 1,
        "authType": null,
        "delFlag": null,
        "roleName": null,
        "roleKey": null,
        "dataRange": null,
        "roleStatus": null,
        "remark": null,
        "pagingQuery": null,
        "operationRecord": null,
        "menuList": null,
        "dataScope": null,
        "deptId": null,
        "roleUserAssociationsList": null
      }
    ]
  }
];
const cities = ['序号', '姓名', '性别', '年龄', '账号', '密码', '所属部门', '创建时间', '密码', '创建人', '身份证号码'];

const openExportDialog = () => {
  exportDialogVisible.value = true;
};

const handleExportOk = (selectedFields: string[]) => {
  console.log("导出成功，选择的字段:", selectedFields);
  exportDialogVisible.value = false;
};
</script> -->
